<template>
  <div style="text-align:center">
    <load-more tip="排列3游戏" :show-loading="false" background-color="#fbf9fe"></load-more>
    <div style="padding:0 15px">
      <x-table>
        <thead>
        <tr style="background-color:#49AEF1">
          <th>预警统计</th>
          <th>数量</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td><p style="color:#787878; font-size:14px;"><router-link to="/Home/Monitor/Pl3_Detail">排列3奖池超限预警</router-link></p></td>
          <td><p style="color:#787878; font-size:14px;">10</p></td>
        </tr>
        <tr>
          <td><p style="color:#787878; font-size:14px;">排列3调节基金连续多期下降预警</p></td>
          <td><p style="color:#787878; font-size:14px;">10</p></td>
        </tr>
        <tr>
          <td><p style="color:#787878; font-size:14px;">排列3大额投注预警</p></td>
          <td><p style="color:#787878; font-size:14px;">20</p></td>
        </tr>
        <tr>
          <td><p style="color:#787878; font-size:14px;">排列3大额中奖预警</p></td>
          <td><p style="color:#787878; font-size:14px;">5</p></td>
        </tr>
        </tbody>
      </x-table>
    </div>
    <br>
    <load-more tip="排列3游戏预警数据" :show-loading="false" background-color="#fbf9fe"></load-more>
    <div class="chart-wrapper" >
      <canvas id="dlt_mountNode3"></canvas>
    </div>
  </div>
</template>

<script>
  import {XTable, LoadMore} from 'vux'

  let F2 = require('@antv/f2')

  export default {
    components: {
      XTable,
      LoadMore
    },
    mounted () {
      this.setChart3()
    },
    methods: {
      setChart3 () {
        const data = [
          { time: 'Jan.', tem: 1000 },
          { time: 'Feb.', tem: 2200 },
          { time: 'Mar.', tem: 2000 },
          { time: 'Apr.', tem: 2600 },
          { time: 'May.', tem: 2000 },
          { time: 'Jun.', tem: 2600 },
          { time: 'Jul.', tem: 2800 },
          { time: 'Aug.', tem: 2000 }
        ]
        const chart = new F2.Chart({
          id: 'dlt_mountNode3',
          width: window.innerWidth,
          height: window.innerWidth > window.innerHeight ? (window.innerHeight - 54) : window.innerWidth * 0.707,
          pixelRatio: window.devicePixelRatio
        })

        chart.source(data)
        chart.tooltip({
          showCrosshairs: true
        })
        chart.scale({
          time: {
            range: [ 0, 1 ]
          },
          tem: {
            tickCount: 5,
            min: 0
          }
        })
        chart.axis('time', {
          label (text, index, total) {
            const textCfg = {}
            if (index === 0) {
              textCfg.textAlign = 'left'
            }
            if (index === total - 1) {
              textCfg.textAlign = 'right'
            }
            return textCfg
          }
        })
        chart.area().position('time*tem')
        chart.line().position('time*tem')
        chart.render()
      }
    },
    data () {
      return {
        width: window.screen.width * 0.8
      }
    }
  }
</script>
